<template>
  <div class="color">
    <h1>username:{{ username }}</h1>
    <h1>username2:{{ username2 }}</h1>
    <button @click="change">修改用户名</button>
  </div>
</template>

<script>
// 解构mapState
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  // 使用计算属性取值
  computed: {
    // 使用函数对象的方式取值
    ...mapState({
      username: (state) => state.login.username
      // 返回值是路径
    }),
    ...mapGetters({
      username2: 'login/getUsername'
    })

  },
  methods: {
    ...mapMutations({
      CHANGE: 'login/CHANGE'
    }),
    change () {
      // this.$store.commit("login/CHANGE", "poochaini");
      this.CHANGE('000111')
    }
  }
}
</script>

<style scoped>
.color {
  background-color: white;
  height: 100%;
}
h1 {
  font-size: 50px;
  font-weight: bold;
}
</style>
